<template>
  <component
    is="a-modal"
    v-model:visible="visible"
    :width="600"
    :title="title"
    :mask-closable="false"
    :ok-loading="loading"
    @cancel="close"
    @before-ok="submit">
    <!-- 表单信息 start -->
    <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true">
      <a-row :gutter="10">
        <a-col :span="24">
          <a-form-item label="用户 ID" field="uid">
            <a-select
              v-model="formData.uid"
              :field-names="{ label: 'nickname', value: 'id' }"
              :options="optionData.uid"
              placeholder="请选择用户 ID"
              allow-clear
             />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="任务订单" field="task_no">
            <a-input v-model="formData.task_no" placeholder="请输入任务订单" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="原图 URL" field="original_img_url">
            <sa-upload-image v-model="formData.original_img_url" :limit="1" :multiple="false" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="遮罩 URL" field="original_mask_url">
            <sa-upload-image v-model="formData.original_mask_url" :limit="1" :multiple="false" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="模板 ID" field="template_id">
            <a-select
              v-model="formData.template_id"
              :field-names="{ label: 'name', value: 'id' }"
              :options="optionData.template_id"
              placeholder="请选择模板 ID"
              allow-clear
             />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="清晰度" field="articulation">
            <a-input v-model="formData.articulation" placeholder="请输入清晰度" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="成品二次加工用途" field="seed">
            <a-textarea v-model="formData.seed" placeholder="请输入成品二次加工用途" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="是否人工单" field="manual">
            <sa-select v-model="formData.manual" dict="yes_or_no" placeholder="请选择是否人工单" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="人工单描述" field="remarks">
            <a-textarea v-model="formData.remarks" placeholder="请输入人工单描述" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="服务器返回" field="prompt_id">
            <a-input v-model="formData.prompt_id" placeholder="请输入服务器返回" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="提交状态" field="submission_status">
            <sa-select v-model="formData.submission_status" dict="yes_or_no" placeholder="请选择提交状态" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="任务状态" field="task_status">
            <sa-select v-model="formData.task_status" dict="task_status" placeholder="请选择任务状态" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="尝试次数" field="retry_count">
            <a-input v-model="formData.retry_count" placeholder="请输入尝试次数" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="任务结果 URL" field="result_img_url">
            <sa-upload-image v-model="formData.result_img_url" :limit="1" :multiple="false" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="关联服务器名称" field="server_name">
            <a-input v-model="formData.server_name" placeholder="请输入关联服务器名称" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="任务完成时间" field="completed_time">
            <a-date-picker v-model="formData.completed_time" :show-time="true" mode="date" placeholder="请选择任务完成时间" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="是否分享" field="is_share">
            <sa-select v-model="formData.is_share" dict="yes_or_no" placeholder="请选择是否分享" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="点赞次数" field="view">
            <a-input v-model="formData.view" placeholder="请输入点赞次数" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="检测状态" field="check_status">
            <sa-select v-model="formData.check_status" dict="check_status" placeholder="请选择检测状态" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="检测详情" field="check_info">
            <ma-codeEditor v-model="formData.check_info" :height="400" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <!-- 表单信息 end -->
  </component>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { Message, Modal } from '@arco-design/web-vue'
import commonApi from '@/api/common'
import api from '../api/task'

const emit = defineEmits(['success'])
// 引用定义
const visible = ref(false)
const loading = ref(false)
const formRef = ref()
const mode = ref('')
const optionData = reactive({
  uid: [],
  template_id: [],
})

let title = computed(() => {
  return '任务列表' + (mode.value == 'add' ? '-新增' : '-编辑')
})

// 表单信息
const formData = reactive({
  id: null,
  uid: null,
  task_no: null,
  original_img_url: '',
  original_mask_url: '',
  template_id: null,
  articulation: 1,
  seed: '',
  manual: 2,
  remarks: '',
  prompt_id: '',
  submission_status: 1,
  task_status: 1,
  retry_count: null,
  result_img_url: '',
  server_name: '',
  completed_time: '',
  is_share: 2,
  view: null,
  check_status: null,
  check_info: '',
})

// 验证规则
const rules = {
  uid: [{ required: true, message: '用户 ID必需填写' }],
  articulation: [{ required: true, message: '清晰度必需填写' }],
  manual: [{ required: true, message: '是否人工单必需填写' }],
  submission_status: [{ required: true, message: '提交状态必需填写' }],
  task_status: [{ required: true, message: '任务状态必需填写' }],
  server_name: [{ required: true, message: '关联服务器名称必需填写' }],
  is_share: [{ required: true, message: '是否分享必需填写' }],
  view: [{ required: true, message: '点赞次数必需填写' }],
}

// 打开弹框
const open = async (type = 'add') => {
  mode.value = type
  visible.value = true
  formRef.value.resetFields()
  await initPage()
}

// 初始化页面数据
const initPage = async () => {
  const resp_uid = await commonApi.commonGet('/ai/User/index?saiType=all')
  optionData.uid = resp_uid.data
  const resp_template_id = await commonApi.commonGet('/ai/TemplatePrice/index?saiType=all')
  optionData.template_id = resp_template_id.data
}

// 设置数据
const setFormData = async (data) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      formData[key] = data[key]
    }
  }
}

// 数据保存
const submit = async (done) => {
  const validate = await formRef.value?.validate()
  if (!validate) {
    loading.value = true
    let data = { ...formData }
    let result = {}
    if (mode.value === 'add') {
      // 添加数据
      data.id = undefined
      result = await api.save(data)
    } else {
      // 修改数据
      result = await api.update(data.id, data)
    }
    if (result.code === 200) {
      Message.success('操作成功')
      emit('success')
      done(true)
    }
    // 防止连续点击提交
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
  done(false)
}

// 关闭弹窗
const close = () => (visible.value = false)

defineExpose({ open, setFormData })
</script>
